<template>
	<view>
		<view class="">
			<view class="pad-lr-32 display-sb view_view pad-tb-40 mar-top-20  bgfff">
				<view class="left_view">
					姓名
				</view>
				<view class="right_view display-sb align-items">
					<view class="display align-items">
						<input type="text" class="ml10 fontSize-28 " v-model="info.name" placeholder-class="" placeholder="请填写你的姓名" />
					</view>
				</view>
			</view>
			<view class=" pad-lr-32 display-sb view_view pad-tb-40   bgfff">
				<view class="left_view">
					手机号
				</view>
				<view class="right_view display-sb align-items">
					<view class="display align-items">
						<input type="number" maxlength="11" class="ml10 fontSize-28" placeholder-class="" v-model="info.mobile" placeholder="请填写手机号" />
					</view>
				</view>
			</view>
			<view class="pad-lr-32 display-sb view_view pad-tb-40  bgfff">
				<view class="left_view ">
					所在地区
				</view>
				<view class="right_view display-row-reverse align-items" @click="selenowaddress">
					<image src="/static/img/icon_youjiantou_.png" class="you_icon ml10" mode=""></image>
						<view class="ml10 text-align-right fontSize-28" >{{info?.province?(info?.province+'/'+info?.city+'/'+info?.area) :'选择所在省、市、区'}}</view>
				</view>
			</view>
			<view class="pad-lr-32 display-sb view_view pad-tb-40  bgfff">
				<view class="left_view">
					详细地址
				</view>
				<view class="right_view display align-items">
					<textarea name="" class="textare" id="" placeholder-class="" placeholder="街道、楼牌号等详细地址" v-model="info.address" cols="30" rows="10"></textarea>
				</view>
			</view>
			<view class="pad-lr-32 display-sb view_view pad-tb-40  bgfff">
				<view class="left_view">
					设为默认地址
				</view>
				<view class="right_view display-row-reverse align-items">
					<switch class="my-switch" :checked="checked" @change="changeswitch" color="#bc8c1e" style="transform:scale(0.7)" />
				</view>
			</view>
		</view>
			<view class="baocun_btn poFi text-align-center col-f fontSize-32 radius-40" @click="addressbtn">
				保存地址
			</view>
		<!-- 地址选择弹窗 -->
		<!-- <tm-city-picker v-model:show="showdate" color="#2DB295" @confirm="change" v-model="citydate" v-model:model-str="dateStr"></tm-city-picker> -->
		<my-address :showPop="showdate" @confirm="sureAddress" @cancel="cancel"></my-address>
	</view>
</template>

<script lang="ts" setup>
import { onLoad } from '@dcloudio/uni-app';
import { ref } from 'vue';
import {saveAddress,editAddress,userAddressInfo} from '@/utils/api'
onLoad((options)=>{
	if(options.id){
		uni.setNavigationBarTitle({
			title:'编辑收货地址'
		})
		info.value.id = options.id
		id.value = options.id
		_getAddressInfo()
	}
})
const info = ref({
	id:'',
	name:'',
	mobile:'',
	province:'',
	city:'',
	area:'',
	address:'',
	is_default:0
})
const id = ref()//地址id-编辑时存在
const _getAddressInfo =() =>{
	userAddressInfo({id:id.value}).then(res=>{
		if(res.code==1){
			info.value = res.data.address
			checked.value = res.data.address.is_default==0?false:true
		}
	})
}
const checked =ref(false)
const changeswitch =(e) =>{
	checked.value = e.detail.value
	if(checked.value){
		info.value.is_default=1
	}else{
		info.value.is_default=0
	}
}
const showdate = ref(false)
const citydate = ref()
const dateStr = ref()
const selenowaddress =() =>{
	showdate.value = true
}
const change =(e) =>{
	info.value.province = dateStr.value.split('/')[0]
	info.value.city = dateStr.value.split('/')[1]
	info.value.area = dateStr.value.split('/')[2]
}
const isValidPhoneNumber =(phoneNumber:string) =>{
	  // 中国大陆手机号码正则表达式
	    const regex = /^1[3-9]\d{9}$/;
	    return regex.test(phoneNumber);
}
const addressbtn =() =>{
	if(!info.value.name||!info.value.mobile||!info.value.province||!info.value.city||!info.value.area||!info.value.address){
		uni.showToast({
			title:'请填写完整',
			icon:'none'
		})
		return
	}
	if(!isValidPhoneNumber(info.value.mobile)){
		uni.showToast({
			title:'手机号不合法',
			icon:'none'
		})
		return
	}
		saveAddress(info.value).then(res=>{
			uni.showToast({
				title:res.msg,
				icon:'none'
			})
			if(res.code==1){
				uni.$emit('addaddress')
				setTimeout(()=>{
					uni.navigateBack({delta:1})
				},1500)
			}
		})
}
const sureAddress= (e)=>{
	info.value.province = e.split('/')[0]
	info.value.city = e.split('/')[1]
	info.value.area = e.split('/')[2]
}
const cancel = () =>{
	showdate.value = false
}
</script>

<style lang="scss">
page{
	background-color: #f6f6f6;
}
.view_view{
	border-bottom: 3rpx solid #f6f6f6;
}
.left_view{
	width: 180rpx;
}
.right_view{
	width: 512rpx;
	.you_icon{
		width: 28rpx;
		height: 28rpx;
	}
}
.textare{
	height: 120rpx;
}
.baocun_btn{
	width: 600rpx;
	height: 80rpx;
	line-height: 80rpx;
	background: #C9951C;
	bottom: 100rpx;
	left: calc(50% - 300rpx);
}
</style>
